<template>
  <div class="min-h-full overflow-x-hidden fxCenCen" style="color: #323639">

    <!--背景图-->
    <div class="login-background absolute left-0 top-0 size-full"></div>

    <!--左上角-->
    <div class="fxStaCen absolute left-0 top-0 ml-4 mt-4">
      <img src="../common/assets/img/logo60.png" class="mr-2" width="42"/>
      <p class="text-xl font-medium"> Vis Admin Vue </p>
    </div>

    <div class="shadow-primary/5 shadow-float rounded-3xl w-[40%] z-10 bg-white px-20 py-10">
      <div class="text-foreground mb-3 text-3xl font-bold leading-9 tracking-tight lg:text-4xl">欢迎回来 👋🏻</div>
      <div style="color: hsl(240 3.8% 46.1%)">请选择您的身份并输入您的帐户信息</div>


      <el-form ref="formDataRef" :model="formData" :rules="formRules" class="mt-8">


        <el-form-item prop="role">
          <el-select v-model="formData.role" placeholder="请选择登录身份" size="large">
            <template #label="{ label, value }">
              <div class="fxStaCen" style="margin-left: 3px">
                <Avatar style="width: 1em; height: 1em; margin-right: 8px" color="#00000050"/>
                <span>{{ label }} </span>
              </div>
            </template>

            <el-option
                v-for="item in option.role"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              <div class="fxStaCen">
                <span>{{ item.label }}</span>
              </div>
            </el-option>

          </el-select>

        </el-form-item>


        <el-form-item prop="account">
          <el-input v-model="formData.account" type="text" size="large" auto-complete="off"
                    placeholder="账号/手机号/邮箱"
                    prefix-icon="User">
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="formData.password" type="password" show-password size="large" auto-complete="off"
                    placeholder="密码"
                    @keyup.enter="submitLogin" prefix-icon="Lock">
          </el-input>
        </el-form-item>

        <el-form-item prop="code" v-if="option.captchaEnabled">
          <el-input v-model="formData.code" size="large" auto-complete="off" placeholder="验证码"
                    style="width: calc(100% - 130px)"
                    @keyup.enter="submitLogin" prefix-icon="Postcard">
          </el-input>
          <img :src="option.codeUrl" @click="getCaptchaImg" style="width: 120px;height: 40px;margin-left: 10px"/>
        </el-form-item>

        <div class="fxBet" style="margin-bottom: 25px;">
          <div @click="openRegister" style="font-size: 14px;color: #006be6" class="pointer">立即注册</div>

          <div @click="forgetPassword" style="font-size: 14px;color: #006be6" class="pointer">忘记密码?</div>
        </div>


        <el-form-item style="width:100%;">
          <el-button :loading="option.loading" size="large" type="primary" style="width:100%;"
                     @click.prevent="submitLogin">
            <span v-if="!option.loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>

      </el-form>

    </div>
    <!--    <div class="flex-center relative w-full ">-->
    <!--      &lt;!&ndash;背景图&ndash;&gt;-->
    <!--      <div class="login-background absolute left-0 top-0 size-full"></div>-->
    <!--      &lt;!&ndash;中间区域&ndash;&gt;-->
    <!--      <div>-->
    <!--        123123123-->
    <!--      </div>-->

    <!--    </div>-->


    <!--    <div>-->
    <!--      98999999999999-->
    <!--    </div>-->


  </div>

</template>

<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {apiLoginCaptchaImg, apiUserLogin} from "@/api/system";
import {encrypt} from "@/common/utils/jsencrypt";
import {setAccessToken, setRefreshToken} from "@/common/utils/cache";
import {closeLoading, showLoading} from "@/common/utils/kit";
import router from "@/common/router";

let optionKey = {
  loading: false,
  captchaEnabled: true,
  codeUrl: "",
  role: [
    {
      label: "系统管理员",
      value: "10",
    },
    {
      label: "ROOT",
      value: "0",
    }
  ]
}

let formKey = {
  role: "10",
  account: "",
  password: "",
  rememberMe: false,
  expireTime: 0,
  code: "",
}

const formRules = {
  account: [{required: true, trigger: "blur", message: "请输入账号/手机号/邮箱"}],
  password: [{required: true, trigger: "blur", message: "请输入密码"}],
  code: [{required: true, trigger: "blur", message: "请输入验证码"}]
};

const option = ref(optionKey);
const formData = ref(formKey);


onMounted(() => {
  getCaptchaImg()
})

watch(formData.value, (value, oldValue, onCleanup) => {
  // ////console.log(" value ", value)
})

function submitLogin() {
  showLoading("正在登录...")
  option.value.loading = true;
  // proxy.$refs.loginRef.validate(valid => {
  //
  // })
  apiUserLogin(encryptLoginParam()).then(res => {
    if (res.success) {
      setAccessToken(res.data.accessToken)
      setRefreshToken(res.data.refreshToken)
      router.push("/index")
      closeLoading()
      return;
    }
    option.value.loading = false;
    getCaptchaImg()
    closeLoading()
  })
}

function encryptLoginParam() {
  formData.value.expireTime = new Date().getTime() + 10000;

  let paramStr = encrypt(JSON.stringify(formData.value))

  return {paramStr: paramStr}
}

// 忘记密码处理
function forgetPassword() {
  $modal.info("请联系管理员【15144042132】")
}

function openRegister() {
  option.value.openRegister = true;
  // userRegister(handlerLoginParam()).then((res) => {

  // ////console.log("handleRegister ", res)

  // }).catch((error) => {
  //   getCaptchaImg()
  // })
}

function getCaptchaImg() {
  apiLoginCaptchaImg().then((res) => {
    option.value.codeUrl = "data:image/gif;base64," + res.data.img;
    formData.value.id = res.data.id;
  })

}
</script>

<style scoped>

.login-background {
  background: linear-gradient(
      154deg,
      rgba(46, 142, 113, 0.08) 25%,
      hsla(210, 72%, 38%, 0.3) 48%,
      #07070915 64%
  );
  filter: blur(100px);
}
</style>
